<template>
  <div id="app">
		
  	<Page v-for="order in Math.ceil(block_list[block_list.length-1].end/height)" :block_list = "block_list" :order='order-1' :height='height'></Page>
  </div>
</template>

<script>

import Page from './Page.vue'
export default {
  name: 'app',
  components: {

		Page,
  },
  data(){
  	return{
  		block_list:[{start:0,end:120,disdrag:true},{start:190,end:300},{start:420,end:500},{start:540,end:620},{start:625,end:7000}],
  		height:560,
  		
  	}
  },
  created:function(){
  	this.optimize_list()
  },
  computed:{
  	
  },
  methods:{
  	optimize_list:function(){
  		let delta = 0;
  		this.block_list.forEach((item,i)=>{
	  		item.new_page = (item.start % this.height == 0)
	  		item.last_end = (this.block_list[i - 1] || {end: 0})['end'];
	  		item.start += delta;
	  		item.end += delta;
	  		if (Math.floor(item.last_end/this.height) < Math.floor(item.start/this.height)) {
	  			let add = item.start%this.height;
	  			item.start -= add;
	  			item.end -= add;
	  			delta -=add;
	  			item.new_page = true;
	  		}
	  	})
  	}
  }
}
</script>

<style>
	
	*{
		margin: 0px;
		padding: 0px;
	}


</style>
